<template>
  <div class="page-body main-content-body">
    <router-view class="main-router-view" v-if="route.meta && route.meta.keepAlive" v-slot="{ Component }">
      <keep-alive :key="route.path">
        <component :is="Component" :key="route.path" />
      </keep-alive>
    </router-view>
    <router-view v-if="!route.meta || !route.meta.keepAlive" class="main-router-view"></router-view>

    <div v-if="website.footer.show" v-html="website.footer.content" :style="footerStyle"
      class="page-footer main-content-footer"></div>
  </div>
</template>
<script setup>
  import { ref } from "vue";
  import { useRoute } from "vue-router";
  import config from "@/config/index";

  const route = useRoute();

  const website = ref({
    footer: Object.assign(
      {
        show: true,
        content: "版权信息",
      },
      config.footer.base
    ),
  })
  
  const footerStyle = ref(Object.assign(
    {
      height: "30px",
    },
    config.footer.style
  ))

</script>

<style scoped>
  .page-body {
    display: block;
    flex: 1;
    overflow: auto;
    box-sizing: border-box;
  }

  .main-content-body {
    position: relative;
    background: #f0f2f5;
  }

  .main-router-view {
    margin: 0 1.2rem;
    box-shadow: 0px 0 16px rgba(0, 0, 0, 0.1);
  }

  .page-footer {
    line-height: 20px;
    text-align: center;
  }

  .main-content-footer {
    width: 100%;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
</style>